<template>
  <div id="appAdvertisingList">
    <h1 class="con-right-title">
      APP广告
    </h1>
    <div class="bottom-box">
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:advertising:add'"
            type="warning"
            icon="el-icon-plus"
            @click="handelAddEdit('add')"
          >
            新增
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column type="index" width="80" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="描述"
            prop="description"
            min-width="110"
          ></el-table-column>
          <el-table-column label="图片" min-width="110" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.imgInfo && scope.row.imgInfo.length > 0">
                <listImgString
                  :imgInfo="scope.row.imgInfo"
                  :showNum="false"
                ></listImgString>
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" min-width="80">
            <template slot-scope="scope">
              <span
                v-if="scope.row.status"
                class="tag-span"
                :class="scope.row.status | filterClass('guratType')"
              >
                {{ scope.row.status | filterName('guratType') }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="链接地址" prop="url" min-width="110">
            <template slot-scope="{ row }">
              <el-tooltip class="item" effect="dark" placement="top">
                <div style="max-width: 400px;" slot="content">
                  {{ row.url }}
                </div>
                <div class="oneLine">
                  {{ row.url }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="停留时间" prop="stopTime" min-width="90">
            <template slot-scope="scope"> {{ scope.row.stopTime }}s </template>
          </el-table-column>
          <el-table-column label="频率" prop="frequently" min-width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.frequently === 'EVERY_TIME'"
                >每次登录后第一次打开</span
              >
              <span v-else-if="scope.row.frequently === 'MONTH'"
                >每月打开一次</span
              >
              <span v-else-if="scope.row.frequently === 'DAY'"
                >每天打开一次</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createdTime"
            min-width="160"
          ></el-table-column>
          <el-table-column
            label="最后修改时间"
            prop="lastModifiedTime"
            min-width="160"
          >
            <template slot-scope="scope">
              {{ scope.row.lastModifiedTime | timeToTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作人" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.lastUser && scope.row.lastUser.userName">
                {{ scope.row.lastUser.userName }}</span
              >
              <span v-else>{{
                scope.row.createdUser && scope.row.createdUser.userName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:advertising:enable'"
                v-if="scope.row.status === 'TEMPORARY'"
                type="text"
                @click="handelEnabled(scope.row.id)"
              >
                启用
              </el-button>
              <el-button
                v-permission="'wh:system:advertising:edit'"
                v-if="scope.row.status === 'TEMPORARY'"
                type="text"
                @click="handelAddEdit('edit', scope.row.id)"
              >
                编辑
              </el-button>
              <el-button
                v-permission="'wh:system:advertising:disabled'"
                v-if="
                  scope.row.status === 'OPEN' ||
                    scope.row.status === 'TEMPORARY'
                "
                type="text"
                @click="handelClose(scope.row.id)"
              >
                关闭
              </el-button>
              <el-button
                type="text"
                v-permission="'wh:system:advertising:copy'"
                v-if="scope.row.status === 'CLOSE'"
                @click="handelAddEdit('copy', scope.row.id)"
              >
                一键复制
              </el-button>
              <el-button
                v-permission="'wh:system:advertising:remove'"
                v-if="scope.row.status === 'CLOSE'"
                type="text"
                @click="deleteWork(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!--添加弹窗 -->
        <addEditDialog
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
          @refresh="refresh"
        ></addEditDialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAdverList,
  delAdvert,
  putEnable,
  putDisable
} from '@/api/spaceConfiguration/appAdvertising' // 接口
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import topSearch from '@component/spaceConfiguration/appAdvertising/topSearch' // 上部搜索条件
import { contentToStr } from '@utils/pubFunction'
import addEditDialog from '@component/spaceConfiguration/appAdvertising/addEditDialog' // 添加弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'

export default {
  name: 'page',
  msg: '',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    listImgString,
    addEditDialog
  },
  data() {
    return {
      loading: false,
      total: 10, // 搜索条件
      formInline: {
        status: '', // 状态
        name: '', // 名称
        sort: '',
        operatorId: '' // 审核人
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      multipleSelection: [],
      powerStr: 'system:advertising:list', // 是否查询的标识
      powerAry: [], // 可显示的权限
      canShowPage: false, // 是否显示当前页面
      // 表格数据
      tableData: [],
      dialogData: {
        isShow: false, // 默认隐藏
        id: '', // 默认新增
        type: 'add' // 默认新增
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        // this.searchList()
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getAdverList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    // 添加开屏广告
    handelAddEdit(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.id = params
    },
    // 关闭
    handelClose(id) {
      putDisable(
        id,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 启用
    handelEnabled(id) {
      putEnable(
        id,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 删除
    deleteWork(id) {
      this.$confirm('确定删除此条广告页吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delAdvert(
            id,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
#appAdvertisingList {
  @import url('~@common/style/imgBox.less');
  .oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
